﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>xBim浏览器5</title>
    <!--<script src="/Scripts/gl-matrix.js"></script>
    <script src="/Scripts/webgl-utils.js"></script>-->
    <link href="/Scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="/Scripts/bootstrap/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="/Scripts/bootstrap-treeview/dist/bootstrap-treeview.min.css" rel="stylesheet" />
    <link href="/Scripts/layui/css/layui.css" rel="stylesheet" />
    <script src="/Scripts/xbim/xbim-viewer.debug.bundle.js"></script>
    <script src="/Scripts/xbim/xbim-navigation-cube.js"></script>
    <script src="/Scripts/xbim/xbim-navigation-home.js"></script>
    <script src="/Scripts/jquery/jquery-2.2.3.min.js"></script>
    <script src="/Scripts/bootstrap/bootstrap.min.js"></script>
    <script src="/Scripts/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <script src="/Scripts/layui/layui.all.js"></script>
    <script src="/Scripts/Util/treeHelper.js"></script>

    <style>

        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
            border: none;
            margin-left: auto;
            margin-right: auto;
        }

        #bimProjectInfo {
            position: absolute;
            left: 0;
            top: 52px;
            display: inline-block;
            width: 280px;
            border: 1px solid gray;
            /*opacity: 0.5;*/
            background-color: white;
        }

        #bimProperties {
            position: absolute;
            right: 0;
            top: 52px;
            display: inline-block;
            /*width: 250px;*/
            width: 350px;
            border: 1px solid gray;
            /*opacity: 0.5;*/
            background-color: white;
        }

        #bimStatus {
            position: absolute;
            right: 0;
            bottom: 0;
            /*display: block;*/
            width: 100%;
            border: 1px solid gray;
            /*opacity: 0.5;*/
            background-color: white;
        }
    </style>

</head>

<body>

    <div class="container">
    </div>
    <!-- 顶部 操作 -->
    <nav class="navbar navbar-default" style="margin-bottom:0;">
        <div class="container-fluid">
            <!-- 品牌Logo、最小化时菜单 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="xBIM" src="/Scripts/Img/logo/xbim_white_h35.png" style="margin-top:-10px;background-color:cornflowerblue;" />
                </a>
            </div>
            <!-- 操作按钮 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!-- 左对齐 -->
                <ul class="nav navbar-nav">
                    <li> <a style="cursor:pointer;" onclick="for (var i in xProductType){ if (xProductType[i] !== xProductType.IFCSPACE) {viewer.setState(xState.UNDEFINED, xProductType[i])}}"> 显示全部 </a> </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">拖动模式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.navigationMode = 'orbit'">沿轴旋转</a>  </li>
                            <li> <a onclick="viewer.navigationMode = 'free-orbit'">自由旋转</a>  </li>
                            <li> <a onclick="viewer.navigationMode = 'pan'">平移</a>  </li>
                            <li> <a onclick="viewer.navigationMode = 'zoom'">缩放</a>  </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">视图 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a onclick="viewer.show('front')">正面</a> </li>
                            <li><a onclick="viewer.show('back')">背面</a> </li>
                            <li><a onclick="viewer.show('top')">上面</a> </li>
                            <li> <a onclick="viewer.show('bottom')">下面</a></li>
                            <li> <a onclick="viewer.show('left')">左面</a> </li>
                            <li><a onclick="viewer.show('right')">右面</a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">剖切 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.clip();"> 剖切 </a> </li>
                            <li> <a onclick="viewer.unclip();"> 取消剖切 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">相机视角 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.camera = 'perspective';"> 透视 </a> </li>
                            <li> <a onclick="viewer.camera = 'orthogonal';"> 正交 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">单击隐藏 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <label> <input type="radio" name="radioHiding" value="hideOne" /> 隐藏单个 </label>  </li>
                            <li> <label> <input type="radio" name="radioHiding" value="hideType" /> 隐藏类型 </label> </li>
                            <li> <label> <input type="radio" name="radioHiding" value="noHide" /> 取消 </label> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">样式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="for (var i in xProductType){ if (xProductType[i] !== xProductType.IFCSPACE) {viewer.setStyle(1, xProductType[i])}}"> 透明化 </a> </li>
                            <li> <a onclick="for (var i in xProductType){ if (xProductType[i] !== xProductType.IFCSPACE) {viewer.setStyle(2, xProductType[i])}}"> 白化 </a> </li>
                            <li> <a onclick="for (var i in xProductType){ if (xProductType[i] !== xProductType.IFCSPACE) {viewer.setStyle(xState.UNSTYLED, xProductType[i])}}"> 默认 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">渲染模式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <label> <input type="radio" name="radioRenderingMode" value="normal" checked="checked" onchange="viewer.renderingMode = 'normal';" /> 普通 </label> </li>
                            <li> <label> <input type="radio" name="radioRenderingMode" value="xray" onchange="viewer.renderingMode = 'x-ray';" /> X射线 </label>  </li>
                        </ul>
                    </li>

                </ul>
                <!-- 右对齐 -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">墙 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="makeWallsRed()"> 刷红 所有墙 </a> </li>
                            <li> <a onclick="hideWalls()"> 隐藏 所有墙 </a> </li>
                            <li> <a onclick="resetWalls()"> 复位 所有墙 </a> </li>
                            <li role="separator" class="divider"></li>
                            <li> <a onclick="selectAllWalls()"> 选中 所有墙 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">空间 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.setState(xState.UNDEFINED, xProductType.IFCSPACE)"> 显示 </a> </li>
                            <li> <a onclick="viewer.setState(xState.HIDDEN, xProductType.IFCSPACE)"> 隐藏 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">后台接口 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="apiGetAllStoreys()"> 获得楼层信息 </a> </li>
                            <li> <a onclick="apiGetDomains()"> 获得领域信息 </a> </li>
                            <li role="separator" class="divider"></li>
                            <li> <a onclick="apiGetEntityProperties()"> 获得实体属性 </a> </li>
                            <li> <a onclick=" ">  </a> </li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!-- 中间 画布 -->
    <div id="bimContainer">
        <canvas id="xBIM-viewer" width-="800" height-="600" style="width:100%;height:100%;"></canvas>
    </div>
    <!--左侧 导航-->
    <div id="bimProjectInfo">
        <!--索引-->
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#shared_Bldg" data-toggle="tab">  楼层 </a>
            </li>
            <li class="dropdown">
                <a href="#" id="tabDomain" class="dropdown-toggle"
                   data-toggle="dropdown">
                    领域
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="tabDomain">
                    <li><a href="#domain_BuildControl" tabindex="-1" data-toggle="tab">建筑控制</a></li>
                    <li><a href="#domain_FireProtect" tabindex="-1" data-toggle="tab">消防管理</a></li>
                    <li><a href="#domain_StructureElem" tabindex="-1" data-toggle="tab">结构构件</a></li>
                    <li><a href="#domain_StructureAnaly" tabindex="-1" data-toggle="tab">结构分析</a></li>
                    <li><a href="#domain_HVAC" tabindex="-1" data-toggle="tab">暖通工程</a></li>
                    <li><a href="#domain_Electrical" tabindex="-1" data-toggle="tab">电气</a></li>
                    <li><a href="#domain_Architecture" tabindex="-1" data-toggle="tab">建筑</a></li>
                    <li><a href="#domain_ConsManager" tabindex="-1" data-toggle="tab">施工管理</a></li>
                </ul>
            </li>
            <li class="">
                <a href="#setting_all" data-toggle="tab">  设置 </a>
            </li>
        </ul>
        <!-- 内容 -->
        <div id="myTabContent" class="tab-content" style="max-height-:500px;height:90%;overflow-y:scroll;overflow-x:scroll;">
            <div class="tab-pane fade in active" id="shared_Bldg">
                <!--楼层-->
                <div id="trShardBldg"> </div>
            </div>
            <div class="tab-pane fade" id="domain_BuildControl">
                <!--建筑控制-->
                <div id="trdomain_BuildControl"></div>
            </div>
            <div class="tab-pane fade" id="domain_FireProtect">
                <!--消防领域-->
                <div id="trdomain_FireProtect"></div>
            </div>
            <div class="tab-pane fade" id="domain_StructureElem">
                <!--结构构件-->
                <div id="trdomain_StructureElem"></div>
            </div>
            <div class="tab-pane fade" id="domain_StructureAnaly">
                <!--结构分析-->
                <div id="trdomain_StructureAnaly"></div>
            </div>
            <div class="tab-pane fade" id="domain_HVAC">
                <!--暖通工程-->
                <div id="trdomain_HVAC"></div>
            </div>
            <div class="tab-pane fade" id="domain_Electrical">
                <!--电气-->
                <div id="trdomain_Electrical"></div>
            </div>
            <div class="tab-pane fade" id="domain_Architecture">
                <!--建筑-->
                <div id="trdomain_Architecture"></div>
            </div>
            <div class="tab-pane fade" id="domain_ConsManager">
                <!--施工管理-->
                <div id="trdomain_ConsManager"></div>
            </div>
            <div class="tab-pane fade" id="setting_all">
                <!-- 设置 -->
                <div id="divSetting_all"></div>

            </div>
        </div>
    </div>
    <!--右侧 属性-->
    <div id="bimProperties">
        <!-- 属性 -->
        <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading1">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                            属性
                        </a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
                    <div class="panel-body" style="max-height:500px;min-height:200px; overflow-y:scroll;overflow-x:scroll;">

                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--底部 状态-->
    <div id="bimStatus">
        当前ID: <span id="coords"></span>
        帧速率: <span id="fps"></span>
        柔化质地： <span id="fpt"></span>
        错误日志：  <span id="errLog" style="color: red">  </span>
    </div>

    <!--右键菜单-->
    <div id="divContextMenu" style="display:none;position:absolute;background-color:aqua;border-radius:5px;padding:5px;">
        <div>
            <div name="newStep" class="menu-item " style="margin:3px;">
                <img src="/Scripts/img/logo/xbim_white_h35.png" style="width:16px;height:16px;" />
                <span name="newStep" style="cursor:pointer;">【菜单一】</span>
            </div>
            <div name="newTran" class="menu-item " style="margin:3px;">
                <img src="/Scripts/img/logo/xbim_white_h35.png" style="width:16px;height:16px;" />
                <span name="newTran" style="cursor:pointer;">【菜单二】</span>
            </div>
            <div name="delElement" class="menu-item " style="margin:3px;">
                <img src="/Scripts/img/logo/xbim_white_h35.png" style="width:16px;height:16px;" />
                <span name="delElement" style="cursor:pointer;">【菜单三】</span>
            </div>
        </div>
    </div>

    <!-- 基础脚本 -->
    <script type="text/javascript">
        var QueryString = function () {
            // This function is anonymous, is executed immediately and
            // the return value is assigned to QueryString!
            var queryString = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                // If first entry with this name
                if (typeof queryString[pair[0]] === "undefined") {
                    queryString[pair[0]] = pair[1];
                    // If second entry with this name
                } else if (typeof queryString[pair[0]] === "string") {
                    var arr = [queryString[pair[0]], pair[1]];
                    queryString[pair[0]] = arr;
                    // If third or later entry with this name
                } else {
                    queryString[pair[0]].push(pair[1]);
                }
            }
            return queryString;
        }();
    </script>
    <!-- 业务脚本 -->
    <script type="text/javascript">

        $(function () {
            //$("#xBIM-viewer").width(window.innerWidth - 20);
            //$("#xBIM-viewer").height(window.innerHeight - 120);
            $(window).resize(function () {
                $("#bimContainer").width(window.innerWidth - 0);
                $("#bimContainer").height(window.innerHeight - 74);

                $("#bimProjectInfo").height(window.innerHeight - 100);
                $("#bimProperties").height(window.innerHeight - 250);
            });
            $(window).resize();


        });
        // 初始化，定义事件
        var viewer = new xViewer("xBIM-viewer");
        viewer.background = [0, 205, 205]; //  [0, 0, 0];
        viewer.on("error", function (arg) {
            var container = viewer._canvas.parentNode;
            if (container) {
                //preppend error report
                container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;
            }
        });

        viewer.show("back");
        viewer.on("pick", function (arg) {
            var span = document.getElementById("coords");
            if (span) {
                span.innerHTML = arg.id;
            }
            apiGetEntityProperties(arg.id);
            if (viewer.getState(arg.id) == xState.HIGHLIGHTED) {
                viewer.setState(xState.UNDEFINED, [arg.id]);
            }
            else {
                viewer.setState(xState.HIGHLIGHTED, [arg.id]);
            }

        });
        viewer.on("dblclick", function (arg) {
            console.log(arguments);
            openWindows(arg.id);
        });
        viewer.on("mouseDown", function (arg) {
            viewer.setCameraTarget(arg.id);
        });
        viewer.on("fps", function (fps) {
            var span = document.getElementById("fps");
            if (span) {
                span.innerHTML = fps;
            }
        });
        var span = document.getElementById("fpt");
        if (span) {
            span.innerHTML = viewer._fpt != null;
        }

        // 加载模型
        var model = "";
        if (typeof (QueryString.model) == "undefined") { model = "/res/ifc/IFC_Schependomlaan.wexbim"; }
        else { model = QueryString.model; }
        viewer.load(model);
        viewer.start();


        // 墙操作
        //var types = xProductType;
        //var states = xState;
        viewer.defineStyle(0, [255, 0, 0, 255]);  //red
        viewer.defineStyle(1, [0, 0, 255, 100]);  //semitransparent blue
        viewer.defineStyle(2, [255, 255, 255, 255]); //white
        var makeWallsRed = function () {
            viewer.setStyle(0, xProductType.IFCWALLSTANDARDCASE);
            viewer.setStyle(0, xProductType.IFCCURTAINWALL);
            viewer.setStyle(0, xProductType.IFCWALL);
        }
        var selectAllWalls = function () {
            viewer.setState(xState.HIGHLIGHTED, xProductType.IFCWALLSTANDARDCASE);
            viewer.setState(xState.HIGHLIGHTED, xProductType.IFCCURTAINWALL);
            viewer.setState(xState.HIGHLIGHTED, xProductType.IFCWALL);
        }
        var hideWalls = function () {
            viewer.setState(xState.HIDDEN, xProductType.IFCWALLSTANDARDCASE);
            viewer.setState(xState.HIDDEN, xProductType.IFCCURTAINWALL);
            viewer.setState(xState.HIDDEN, xProductType.IFCWALL);
        }
        var resetWalls = function () {
            viewer.setState(xState.UNDEFINED, xProductType.IFCWALLSTANDARDCASE);
            viewer.setState(xState.UNDEFINED, xProductType.IFCCURTAINWALL);
            viewer.setState(xState.UNDEFINED, xProductType.IFCWALL);
        }
        viewer.on("pick", function (args) {
            var id = args.id;
            var radios = document.getElementsByName("radioHiding");
            for (var i in radios) {
                if (radios.hasOwnProperty(i)) {
                    var radio = radios[i];
                    if (radio.checked) {
                        var val = radio.value;
                        if (val === "noHiding") return;
                        if (val === "hideOne") viewer.setState(xState.HIDDEN, [id]);
                        if (val === "hideType") {
                            var type = viewer.getProductType(id);
                            viewer.setState(xState.HIDDEN, type);
                        }
                        break;
                    }
                }
            }

            //viewer.zoomTo(id);
        });
        // 加载插件： 导航，主页
        var cube = new xNavigationCube();
        viewer.addPlugin(cube);
        var home = new xNavigationHome();
        viewer.addPlugin(home);

    </script>
    <!--后台接口-->
    <script>
        // 获得楼层信息
        function apiGetAllStoreys() {
            console.log("获得楼层信息", "……");
            $.ajax({
                url: "/BimIfc2/GetAllStoreys",
                type: "POST",
                data: {
                    wFileName: QueryString.model.replace('wexbim', 'ifc') || "/res/ifc/IFC_Schependomlaan.ifc",
                },
                success: function (ret) {
                    console.log("获得楼层信息", ret);
                    var data = new TreeHelper().ToTree2(ret);
                    console.log("获得楼层信息", data);
                    $('#trShardBldg').treeview({
                        data: data, onNodeSelected: function (ev, node) {
                            console.log(ev, node);
                            var id = parseInt(node.id);
                            viewer.zoomTo(id);
                            viewer.setState(xState.HIGHLIGHTED, [id]);
                            apiGetEntityProperties(id);
                        }
                    });
                }
            });
        }
        // 获得领域信息
        //  BuildControl    建筑控制      FireProtect       消防管理
        //  StructureElem   结构构件      StructureAnaly    结构分析
        //  HVAC            暖通工程      Electrical        电气
        //  Architecture    建筑          ConsManager       施工管理
        function apiGetDomains(type) {
            console.log("获得领域信息", "……");
            $.ajax({
                url: "/BimIfc2/GetDomains",
                type: "POST",
                data: {
                    wFileName: QueryString.model.replace('wexbim', 'ifc') || "/res/ifc/IFC_Schependomlaan.ifc",
                    type: type,
                },
                success: function (ret) {
                    console.log("获得领域信息", ret);
                    var data = new TreeHelper().ToTree2(ret);
                    // data.push({});
                    console.log("获得领域信息", data);
                    $('#trdomain_' + type).treeview({
                        data: data, onNodeSelected: function (ev, node) {
                            console.log(ev, node);
                            var id = parseInt(node.id);
                            viewer.zoomTo(id);
                            viewer.setState(xState.HIGHLIGHTED, [id]);
                            apiGetEntityProperties(id);
                        }
                    });
                }
            });
        }
        // 获得实体属性
        function apiGetEntityProperties(id) {
            console.log("获得实体属性", "……");
            $.ajax({
                url: "/BimIfc2/GetEntityProperties",
                type: "POST",
                data: {
                    wFileName: QueryString.model.replace('wexbim', 'ifc') || "/res/ifc/IFC_Schependomlaan.ifc",
                    id: id || 0,
                },
                success: function (ret) {
                    console.log("获得实体属性", ret);
                    var html = formatEntityProperties(ret);
                    console.log("获得实体属性", html);
                    $("#collapse1").children(":first-child").html(html);
                }
            });
        }
        function formatEntityProperties(datas) {
            var $html = '';
            datas.forEach(function (item) {
                $html += '<div>';
                $html += '<strong>' + item.Name + '</strong>';
                $html += '&ensp;：&ensp;';
                $html += '<span>' + item.Value + '</span>';
                $html += '</div>';
            });
            return $html;
        }
        // 打开弹窗
        function openWindows(id, title) {
            var layer = layui.layer;
            layer.open({
                type: 2
                , title: title||"详情"
                , content: "DetailOfVideo.html?id=" + id
                , area: [500 + 'px', 300 + 'px']
                , btn: ['确认', '取消']
                , yes: function (index, layero) {
                    // 确认
                }
                , cancel: function () {
                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
                , btn2: function (index, layero) {
                    // 取消

                }
                , end: function (index, layero) {
                    // 层销毁后

                }

            });

        }

        $(function () {

            apiGetAllStoreys();
            // apiGetDomains("BuildControl");// 建筑控制
            // apiGetDomains("FireProtect");//  消防管理
            // apiGetDomains("StructureElem");// 结构构件
            // apiGetDomains("StructureAnaly");//  结构分析
            // apiGetDomains("HVAC");//  暖通工程
            apiGetDomains("Electrical");//  电气
            apiGetDomains("Architecture");//  建筑
            //  apiGetDomains("ConsManager");//  施工管理

        })


        //显示右键菜单，及相关操作【新增步骤】【新增转换】【删除元素】【清空画布】
        $("#xBIM-viewer").on('contextmenu', function (ev) {
            var oEvent = ev || event;
            // console.log("contextmenu", oEvent);
            // 显示自定义菜单
            showContextMenu( oEvent);
            // 取消默认右键菜单
            oEvent.cancelBubble = true
            return false;
        });
        function showContextMenu(oEvent) {
            $menu = $("#divContextMenu");
            // 依菜单类型，决定要显示的菜单子项
            $menu.find(".menu-item").hide();
            if (true) {
                $menu.find(".menu-item[name=newStep]").show();
                $menu.find(".menu-item[name=newTran]").show();
                $menu.find(".menu-item[name=delElement]").show();
            }
            // 显示菜单
            $menu.css({ display: "block", left: (oEvent.clientX) + 'px', top: (oEvent.clientY) + 'px' });
        }
        function hideContextMenu() {
            $("#divContextMenu").hide();
        }

    </script>
</body>

</html>